<template>
  <!--  <div id="scroll-board">-->
  <div class="com-container" style="border-radius: 15px;">
    <div class="top">
      <div class="total-item">
        <div>254885</div>
        <div>总存栏</div>
      </div>
      <div class="count-sum">
        <div>{{sumCowCounrt}}</div>
        <div>已打耳标</div>
      </div>
    </div>
    <div class="b-cont">
      <div class="bottom">
        <div class="b-item">
          <div>出栏</div>
          <div>0</div>
        </div>
        <div class="b-item">
          <div>入栏</div>
          <div>0</div>
        </div>
        <div class="b-item">
          <div>总户数</div>
          <div>2429</div>
        </div>
      </div>
      <div class="unit">单位：户</div>
    </div>


    <!-- <h1 style="text-align: center;line-height: 20px;font-family: 华文行楷,serif;font-size: 30px;color: #df5000">总存栏</h1>
    <div style="text-align: center">
      <span style="text-align: center;line-height: 20px;font-family: 华文行楷,serif;font-size: 30px;color: #df5000"><CountFlop
        :val="val"
      />头</span>
    </div>
    <h5 style="text-align: center;line-height: 10px;font-size: 18px;color: #00df04 ">出栏:<span
      style="font-family: 新宋体,serif;font-size:30px"
    >&nbsp;7800</span>&nbsp;头</h5>
    <h5 style="text-align: center;line-height: 10px;font-size: 18px;color: #fff300">入栏:<span
      style="font-family: 新宋体,serif;font-size:30px"
    >&nbsp;6800</span>&nbsp;头</h5>
    <h5 style="text-align: center;line-height: 10px;font-size: 18px;color: #0070ff">总户量:<span
      style="font-family: 新宋体,serif;font-size:30px"
    >&nbsp;3000</span>&nbsp;户</h5>
    <h5 style="text-align: center;line-height: 10px;font-size: 18px;color: #ec0303">总成交额:<span
      style="font-family: 新宋体,serif;font-size:30px"
    >&nbsp;9000</span>&nbsp;万元</h5> -->
  </div>
</template>

<script>
import Highcharts from 'highcharts/highstock'
import CountFlop from '@/components/index/CountFlop'
import request from "@/utils/request";

export default {
  name: 'scroll',
  data() {
    return {
      val: 254885,
      sumCowCounrt:0
    }
  },

  components: {
    CountFlop
  },
  methods: {
    getE() {
      Highcharts.chart(this.$refs.container, {
        chart: {
          reflow: true,
          backgroundColor: 'none',
          type: 'pie',
          options3d: {
            enabled: true,
            alpha: 55,
            viewDistance: 25
          }
        },
        title: {
          text: ''
        },
        credits: {
          enabled: false
        },
        subtitle: {
          text: ''
        },
        plotOptions: {
          pie: {
            center: ['50%', '50%'],
            size: '98%',
            innerSize: 30,
            depth: 20,
            dataLabels: {
              enabled: true,
              // format: '{point.name}'
              format: '<span style="font-size: 24px">{point.name}</br>{point.y}</span>'
            }
          }
        },
        series: [{
          name: '',
          data: [
            {
              name: '牛犊',
              y: 2000,
              /*sliced: true,
              selected: true*/
            },
            {
              name: '奶牛',
              y: 3000,

            }, {
              name: '育肥牛',
              y: 2000,

            }, {
              name: '母牛',
              y: 6000,
            },
          ]
        }]
      })
    },
    queryCountCow(){
      this.queryCountCowRequest().then(r=>{
        console.log("queryCountCow：",r);
        this.sumCowCounrt=r.sumCowCounrt;
      });
    },
    queryCountCowRequest(){
      return request({
        method:'get',
        url:'/dgw/cowEssen/get/cow/count'
      })
    },
  },
  mounted() {
    this.queryCountCow();
  }
}
</script>

<style lang="less">
.top {
  .count-sum {
    text-align: center;
    margin-top: 3%;

    div:first-child {
      display: inline-block;
      padding: 7px 14px;
      color: #ae76ee;
      font-size: 25px;
      border: 2px solid #ddd;
      border-image: -webkit-linear-gradient(#a291cd, #945fe5) 2 2;
      border-image: -moz-linear-gradient(#a291cd, #945fe5) 2 2;
      border-image: -o-linear-gradient(#a291cd, #945fe5) 2 3;
      border-image: linear-gradient(#a291cd, #945fe5) 2 3;
      background-color: rgba(140, 239, 255, .1);
      box-shadow: 0 0 20px -5px #21a5da;

      span {
        font-size: 18px;
      }
    }

    div:last-child {
      color: rgba(255, 255, 255, .6);
      margin-top: 16px
    }
  }

  .total-item {
    text-align: center;
    margin-top: 4%;

    div:first-child {
      display: inline-block;
      padding: 8px 16px;
      color: #8cefff;
      font-size: 30px;
      border: 2px solid #ddd;
      border-image: -webkit-linear-gradient(#21a5da, #0c57b8) 2 2;
      border-image: -moz-linear-gradient(#21a5da, #0c57b8) 2 2;
      border-image: -o-linear-gradient(#21a5da, #0c57b8) 2 2;
      border-image: linear-gradient(#21a5da, #0c57b8) 2 2;
      background-color: rgba(140, 239, 255, .1);
      box-shadow: 0 0 20px -5px #21a5da;

      span {
        font-size: 21px;
      }
    }

    div:last-child {
      color: rgba(255, 255, 255, .6);
      margin-top: 16px
    }
  }
}

.b-cont {
  border: 1px solid #164162;
  //border-top: none;
  border-radius: 0 0 14px 14px;
  margin-top: 6%;
  padding: 10px;
  padding-bottom: 15px;

  .unit {
    text-align: right;
    color: #848896;
    margin: 10px 10px 0;
  }
}

.bottom {
  display: flex;

  .b-item {
    flex: 1;
    text-align: center;
    margin-right: 4px;
    font-size: 22px;

    div:first-child {
      position: relative;
      top: 7px;
      color: #848896;
    }

    div:last-child {
      background-color: #172246;
      padding: 23px 0 8px 0;
      border-radius: 7px;
    }
  }

  .b-item:last-child {
    margin-right: 0;
  }
}

</style>




